<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Sticky Navigation 置顶导航栏</title>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="nav">
        <div class="container">
            <h1 class="logo">
                <a href="index.html">我的网站</a>
            </h1>
            <ul>
                <li><a href="#" class="current">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- 背景:自述 -->
    <div class="hero">
        <div class="container">
            <h1>欢迎来到我的网站</h1>
            <p>工作不行，唱歌不行，长相不行，身材不行，经济实力不行。我一直都在思考一个问题：到底是什么支撑我活了这么多年。</p>
        </div>
    </div>

    <!-- 内容:经历 -->
    <section class="container content">
        <h2>前半生</h2>
        <p>
            君不见黄河之水天上来，奔流到海不复回。
            君不见高堂明镜悲白发，朝如青丝暮成雪。
            人生得意须尽欢，莫使金樽空对月。
            天生我材必有用，千金散尽还复来。
            烹羊宰牛且为乐，会须一饮三百杯。
            岑夫子，丹丘生，将进酒，杯莫停。
            与君歌一曲，请君为我倾耳听。
            钟鼓馔玉不足贵，但愿长醉不愿醒。
            古来圣贤皆寂寞，惟有饮者留其名。
            陈王昔时宴平乐，斗酒十千恣欢谑。
            主人何为言少钱，径须沽取对君酌。
            五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
        </p>
        <h3>后半生</h3>
        <p>昨夜今朝，只争时刻，便将老幼中分。问年华几许？正满三旬。昨岁未离双十，便余九，还算青春。叹今日，虽难称老，少亦难云。
            闺人也添一岁，但神前祝我，早上青云。待花封心急，忘却生辰。听我持杯叹息，屈纤指，不觉眉颦。封侯事，且休提起，共醉斜曛。</p>
    </section>

    <script src="script.js"></script>
</body>

</html>